<!-- Simple dropdown -->
<span uib-dropdown on-toggle="toggled(open)">
      <a href id="simple-dropdown" uib-dropdown-toggle>
        Click me for a dropdown, yo!
      </a>
      <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
        <li ng-repeat="choice in items">
          <a href>{{choice}}</a>
        </li>
      </ul>
    </span>

<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
    <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</div>

<!-- Split button -->
<div class="btn-group" uib-dropdown>
    <button id="split-button" type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger" uib-dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</div>

<!-- Single button using append-to-body -->
<div class="btn-group" uib-dropdown dropdown-append-to-body>
    <button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</div>

<!-- Single button using template-url -->
<div class="btn-group" uib-dropdown>
    <button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Dropdown using template <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html" aria-labelledby="button-template-url">
    </ul>
</div>

<hr/>
<p>
    <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown
    </button>
    <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
</p>

<hr>
<!-- Single button with keyboard nav -->
<div class="btn-group" uib-dropdown keyboard-nav>
    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Dropdown with keyboard navigation <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</div>

<hr>
<!-- AppendTo use case -->
<h4>append-to vs. append-to-body vs. inline example</h4>
<div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
    <div id="dropdown-long-content">
        <div id="dropdown-hidden-container">
            <div class="btn-group" uib-dropdown keyboard-nav dropdown-append-to="appendToEl">
                <button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown in Container <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <div class="btn-group" uib-dropdown dropdown-append-to-body>
                <button id="btn-append-to-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Dropdown on Body <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
            <div class="btn-group" uib-dropdown>
                <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
                    Inline Dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button">
                    <li role="menuitem"><a href="#">Action</a></li>
                    <li role="menuitem"><a href="#">Another action</a></li>
                    <li role="menuitem"><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="dropdown.html">
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
        <li role="menuitem"><a href="#">Action in Template</a></li>
        <li role="menuitem"><a href="#">Another action in Template</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link in Template</a></li>
    </ul>
</script>